<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    /*  --- page分页样式 ----   */
    li {
        list-style: none;
        float: left;
        width: 40px;
        height: 40px;
        border: #d6d8db solid 1px;
        margin-left: 10px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .selected-li{
        background-color: #3ee0e5;
    }
    .pagination-div{
        position: relative;
        left: 20px;
        top:-20px;
    }
    #page_pageNow{
        display: inline-block;
        position: absolute;
        left:4px;
        top: 40px;
    }
    #page_Count{
        position: absolute;
        margin-left: 20px;
        top: 40px;
        display: inline-block;
    }
    #page_ul{
        margin-top: 30px;
        display: inline-block;
        margin-left: 53px;
    }
    /*  -----------------------  */
    table{
        margin-left: 20px;
        width: 1000px;
        height: 100%;
    }
    #img_logo{
        width: 80px;
        height: 30px;
    }
</style>
<body>

    <div id="bland_div">
        <table class="table table-hover">
            <tr>
                <th>品牌id</th>
                <th>品牌名称</th>
                <th>品牌logo</th>
                <th>品牌排序</th>
                <th>添加时间</th>
                <th>分类id</th>
                <th>分类族</th>
            </tr>
            <tr v-for="bland in page.list">
                <td>{{bland.bland_ID}}</td>
                <td>{{bland.bland_Name}}</td>
                <td>
                    <img id="img_logo" :src="bland.bland_Logo">
                </td>
                <td>{{bland.bland_Order}}</td>
                <td>{{bland.addTime}}</td>
                <td>{{bland.class_ID}}</td>
                <td>{{bland.classFamily}}</td>
            </tr>
        </table>

        <!--分页-->
        <div class="pagination-div">
            <p id="page_pageNow">当前页：{{page.pageNow}}</p>
            <ul id="page_ul">
                <li @click="toPage(1)">首页</li>
                <li @click="toPage(page.pageNow - 1)" v-if="page.pageNow>1">{{page.pageNow - 1}}</li>
                <li class="selected-li">{{page.pageNow}}</li>
                <li @click="toPage(page.pageNow + 1)" v-if="page.pageNow<page.totalPage">{{page.pageNow + 1}}</li>
                <li @click="toPage(page.totalPage)">尾页</li>
            </ul>
            <p id="page_Count">共查询出{{page.totalCount}}条数据，共{{page.totalPage}}页。</p>
        </div>

    </div>
    <script src="../../style/vue.js"></script>
    <script src="../../style/jquery-3.3.1.js"></script>
    <script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script>
        $(function (){
            let page = selBland(1);
            let app = new Vue({
                el:"#bland_div",
                data: {
                  page,
                },
                methods:{
                    toPage:function (pageNow){
                        this.page = selBland(pageNow);
                    }
                }
            })

        })

        function selBland(pageNow){
            let page;
            $.ajax({
                type:"post",
                url:"../../BlandController/selBland",
                data: {"pageNow":pageNow},
                dataType:"json",
                async:false,
                success:function (data){
                    page = data;
                }
            })
            return page;
        }
    </script>
</body>
</html>